<form class="form-horizontal" id="sign-message-form" data-toggle="validator" role="form">
    <div class="form-group" id="source-address-field">
        <!-- Source Address Field -->
    </div>
    <div class="form-group">
        <label for="sign-message" class="col-sm-3 control-label text-left">
            Message
            <a href="#" data-toggle="tooltip" title='This is the message that you would like to sign' class="pull-right"><i class="fa fa-lg fa-question-circle-o margin-top-5" ></i></a>
        </label>
        <div class="col-sm-9">
            <textarea type="text" class="form-control" id="sign-message" name="message" placeholder="Message" data-minlength="1" required rows="3"></textarea>
        </div>
    </div>
    <div class="form-group">
        <label for="address" class="col-sm-3 control-label text-left">
            Signature
            <a href="#" data-toggle="tooltip" title='This is the signature which can be used to verify that the message has been signed by the source address' class="pull-right"><i class="fa fa-lg fa-question-circle-o margin-top-5" ></i></a>
        </label>
        <div class="col-sm-9">
            <textarea type="text" class="form-control" id="signed-message" name="signed-message" placeholder="Message Signature" rows="3" readonly></textarea>
        </div>
    </div>
    <div id="transaction-status"></div>
    <div class="text-right">
        <div id="btn-cancel" class="btn btn-danger margin-right-5"><i class="fa fa-lg fa-fw fa-ban"></i> Cancel</div>
        <div id="btn-submit" class="btn btn-success"><i class="fa fa-lg fa-fw fa-envelope"></i> Sign Message</div>
    </div>
</form>


<script>
$(document).ready(function(){

    // Load any field content
    $('#source-address-field').load('html/fields/source-address.html');

    // Delay initializing some fields to give things a chance to load
    setTimeout(function(){

        // Handle loading any data from FW.DIALOG_DATA
        var data = FW.DIALOG_DATA;
        if(data.message)
            $('#sign-message').val(data.message);

        // Reset dialog data so we don't reuse data on form in the future
        FW.DIALOG_DATA = {};

        // Initialize any tooltips
        $('[data-toggle="tooltip"]').tooltip({ 
            html: true,
            placement: 'bottom'
        }); 

    },100);

    // Submit form if user clicks 'Submit' button
    $('#btn-submit').click($.debounce(100,function(e){
        $('#sign-message-form').submit();
    }));

    // Hide the form if users clicks 'Cancel' button
    $('#btn-cancel').click($.debounce(100,function(e){
        dialogClose('dialog-sign-message');
    }));

    // Handle form validation and displaying any errors
    $('#sign-message-form').validator().on('submit', function(e){
        // prevent form submission
        e.preventDefault(); 
        // build out object with name:value pairs
        var arr    = $(this).serializeArray(),
            vals   = {},
            errors = [];
        for(var i=0;i<arr.length;i++){
            var o = arr[i];
            vals[o.name] = o.value;
        }
        console.log('vals=',vals);
        var type = vals.type
        // Verify we have a message to broadcast
        if(String(vals.message).length==0){
            errors.push('You must enter a message to sign!');
            $('#sign-message').closest('.form-group').addClass('has-error has-danger');
        }
        // Display any error message
        updateTransactionStatus('clear');
        if(errors.length){
            dialogMessage('<i class="fa fa-lg fa-fw fa-exclamation-circle"></i> Error(s)', errors.join('<br/>') );
        } else {
            updateTransactionStatus('pending', 'Signing message...');
            // Handle signing the message and populating the 'Signed' box
            var network   = (FW.WALLET_NETWORK==2) ? 'testnet' : 'mainnet',
                signature = null;
            try {
                signature = signMessage(network, vals.source, vals.message);
            } catch(e){
                console.log('error=',e);
            }
            if(signature){
                updateTransactionStatus('success', 'Message successfully signed!');
            } else {
                updateTransactionStatus('error', 'Error signing message!');
            }
            $('#signed-message').val(signature);
        }
    })


});
</script>